<template>
	<view class="container" :class="skinStyle">
		<!-- <base-component :record="category" class="search-wrap" :selectedIndex="selectedIndex"></base-component> -->
		<view class="home-headers" @tap="navTo('/packageA/pages/productList/productList?selectedIndex=1')">
			<view class="home-search">
				<view class="iconfont iconsousuohome"></view>
				<view class="home-search-text">搜索商品名称</view>
			</view>
		</view>
		<view class="category">
			
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
				
				<view class="tab-view-inner">
					<view v-for="(item,index) in tabbar" :key="index"
					class="tab-bar-item"
					 :data-current="index" @tap.stop="swichNav(item,index)">
						 <view class="item-inner" :class="[currentTabId===item.productSubCategoryId ? 'active' : '']">
							{{item.productSubCategoryName}}
						 </view>
					</view>
				</view>
			</scroll-view>
			<view class="right-box">
					<mescroll-uni
						ref="mescrollRef"
						@down="downCallback"
						:up="upOption" 
						@up="getProductsList"
						@init="mescrollInit"
						 :fixed="false"
					>
						<view class="category-banner">
							<image :src="imgSrc+categoryBannerUrl" mode="aspectFill"></image>
						</view>
						<!-- 商品分类 左右滚动-->
						<view class="sticky-box">
							
							<scroll-view class="cate-bar b-b"
							scroll-x :scroll-left="curCateItem.left ? curCateItem.left: 0" scroll-with-animation
							v-if="threeCategoryList.length>0">
								<view class="cate-wrap row">
									<view class="fill-view"></view>
									<text v-for="item in threeCategoryList"
									:id="'cate-'+item.productSubCategoryId"
									class="item"
									:class="{cateactive: item.productSubCategoryId === threeCategoryId}"
									:key="item.productSubCategoryId"
									@click="changeCategory(item)">{{ item.productSubCategoryName }}</text>
									<view class="fill-view"></view>
								</view>
							</scroll-view>
						</view>
					
						<view class="category-wrap">
								<view class="category-goods" v-for="(item,index) in goodsList"
								:key="index"
								@tap="goGoodsDetail(item)">
									<view class="image-box">
										<image :src="imgSrc+item.productThumbnailImageHdUrl" mode="aspectFill"></image>
									</view>
									<view class="image-text">
										<view class="goods-title">{{item.productName}}</view>
										<!-- <view class="goods-subtitle ellipsis">{{item.productDesc}}</view> -->
										<view class="goods-price">
											<text class="discount">￥{{item.productDiscountPrice?item.productDiscountPrice:0}}</text>
											<text v-if="item.productMarketPrice&&item.productMarketPrice!==item.productDiscountPrice"
											class="line-through">
												￥{{item.productMarketPrice}}
											</text>
										</view>
									</view>
								</view>
						</view>
					</mescroll-uni>
			</view>
		</view>
		<view class="safe-area"></view>
		<foot-bar :current="selectedIndex" :skinStyle="skinStyle"></foot-bar>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	// import baseComponent from '@/components/baseComponent/baseComponent'
	import footBar from "@/components/footbar/footbar"
	import mixin from "@/utils/mixin.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [mixin,MescrollMixin],
		components: {
			
			footBar,
		},
		data() {
			return {
				// isLoading:false,
				imgSrc: this.$store.state.imgUrl,
				selectedIndex:1,
				category:{
					type:'search'
				},//共用搜索传参
				height: 0, //scroll-view高度
				heightScroll:0,
				top: 0,
				tabbar: [
				],//左侧栏二级分类
				subCategoryId:'',//通过id获取相应产品
				subCategoryIdCopy:'',
				curSubCategoryId:'',//记录当前二级分类
				threeCategoryList:[
				],//三级分类
				currentTabId: 0, //默认选择第一个分类
				goodsList:[
				],//商品列表
				categoryBannerUrl:'',//当前显示的banner
				curCateItem: {
				}, //当前选中三级分类
				
				threeCategoryId:'',//当前选中三级分类Id
				scrollTop: 200, //tab标题的滚动条位置
				mescroll: [],
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	size: 6 // 每页数据的数量
					},
					noMoreSize: 6,
					isBounce: false,
				},
				 isShowNoMore:false,
			}
		},
		onLoad: function(options) {
			uni.getSystemInfo({
				success: (res) => {
					let top = 0;
					//#ifdef H5
					top = 0;
					//#endif
					this.height =res.windowHeight - uni.upx2px(98)
					this.top = uni.upx2px(100)
					this.heightScroll = 750 / uni.upx2px(750)*(res.windowHeight - uni.upx2px(446))+'px'
				}
			});
			 if(options.subCategoryId) {
				this.subCategoryIdCopy= options.subCategoryId;
			 }
			
		},
		
		methods: {
			mescrollInit(mescroll){
				 this.mescroll = mescroll;
				 this.getCategoryList();//分类列表(二三级)
				// this.mescroll.resetUpScroll(false)
			},
			
			// mescrollInit(mescroll){
			// 	this.mescroll = mescroll;
				
			// },
			goGoodsDetail(item){
				this.$util.gotoGoodsDetail('productId', item.productId);
			},
			switchChange(){
				//this.mescroll.removeEmpty()  //移除空布局，主要是第一次无值，第二次有值
				//this.mescroll.showUpScroll()//显示上拉加载，主要用于标签1加载完END，切换标签2时默认替换END(有切换标签时调用);
				this.goodsList=[];
				this.mescroll.resetUpScroll()
				// this.mescroll.showEmpty() 
			},
			//分类列表
			getCategoryList() {
				var that=this;
				this.$http.getCategoryList().then((res) => {
					if(res.status === 0) {
						if(res.data.length>0) {
							console.log(res.data)
							this.tabbar=res.data;
							if(this.subCategoryIdCopy) {
								const index = this.findActive();
								this.getCurProducts(index);
							} else {
								this.getCurProducts(0);
							}
						}
					}
				})
			},
			getCurProducts(index,tag){//获取当前二级分类下的信息
				this.curSubCategoryId=this.tabbar[index].productSubCategoryId;//当前二级分类id
				this.categoryBannerUrl=this.tabbar[index].productSubCategoryUrl;//banner
				if(this.tabbar[index].levelThreeCategorys&&this.tabbar[index].levelThreeCategorys.length>0){//三级分类列表存在
					this.threeCategoryList=[{
						productSubCategoryName:'全部',
						productSubCategoryId:'all',
					  },...this.tabbar[index].levelThreeCategorys
					];//三级分类
					if(this.subCategoryIdCopy){
						this.subCategoryId=this.subCategoryIdCopy;
						let levelThreeIndex = this.threeCategoryList.findIndex(i => i.productSubCategoryId == this.subCategoryId);
			
						if(levelThreeIndex> -1){
							this.threeCategoryId=this.threeCategoryList[levelThreeIndex].productSubCategoryId;
						}else{
							this.threeCategoryId='all'
							this.subCategoryId=this.curSubCategoryId;
						}
						
					}else{
						this.currentTabId = this.curSubCategoryId;
						this.subCategoryId=this.curSubCategoryId;//三级分类选择全部时传当前二级id
						this.threeCategoryId='all';//高亮
					}
				}else{//三级分类为空
					this.threeCategoryList=[{
						productSubCategoryName:'全部',
						productSubCategoryId:'all',
					  }
					];
					if(this.subCategoryIdCopy){
						this.subCategoryId=this.subCategoryIdCopy;
						this.sideScroll();
					}else{
						this.subCategoryId=this.curSubCategoryId;
						this.currentTabId=this.curSubCategoryId;;
					}
					this.threeCategoryId='all'
				}
				
				if(this.threeCategoryId==='all'){
					this.subCategoryId=this.tabbar[index].productSubCategoryId;
				}
				if(tag==='secord'){
					this.switchChange()
				}else{
					this.getProductsList({size:6,num:1});
				}
				
			},
			findActive() {
				let nowIndex;
				// 根据subCategoryIdCopy跳转到全部产品页
				const index = this.tabbar.findIndex(i => i.productSubCategoryId == this.subCategoryIdCopy);
				if(index > -1) {
					nowIndex = index;
					this.currentTabId = this.tabbar[index].productSubCategoryId;
				} else {
					this.tabbar.forEach((i,k) => {
						if(i.levelThreeCategorys.length > 0) {
							i.levelThreeCategorys.forEach(u => {
								if(u.productSubCategoryId == this.subCategoryIdCopy) {
									this.currentTabId = i.productSubCategoryId;
									nowIndex = k;
								}
							})
						}
						
					})
				}
				return nowIndex;
			},
			sideScroll(){//二级分类滚动
				let curindex=0;
				this.tabbar.filter((item,index)=>{
					if(item.productSubCategoryId===this.subCategoryId){
						curindex=index;
					}
				})
				if (curindex > 8) {
					this.scrollTop = 550
				}else if(curindex > 17){
					this.scrollTop = 1300;
				}
			},
			swichNav(item,index) {//二级分类切换
				let cur = item.productSubCategoryId;
				if (this.currentTabId == cur) {
					return false;
				} else {
					this.currentTabId = cur;
				}
				// this.isLoading = true;
				// this.subCategoryId = "";
				this.subCategoryIdCopy = "";
				// this.curCateItem = null;
				
				this.getCurProducts(index,'secord');
				
			},
			getProductsList(page){//产品一览详情取得
				if(this.subCategoryId){
					let params={
						current:page.num,
						pageSize:page.size,
						subCategoryId:this.subCategoryId,
						productName:''
					};
					this.$http.getProductList(params).then((res) => {
						 // this.isLoading = false;
						if (res.status === 0) {
							let curPageData =res.data.records;
							this.mescroll.endSuccess(res.data.records.length);
							if (page.num == 1) {
								this.goodsList = []
							};
							this.goodsList = this.goodsList.concat(curPageData);
							
						}
					}).catch(() => {
						this.mescroll.endErr()
					});
				}
			},
			//分类默认 处理分类滚动
			calcCateRect(){
				const tasks = [];
				// if(this.threeCategoryList&&this.threeCategoryList.length>0){
					this.threeCategoryList.forEach(async item=> {
						tasks.push(new Promise(resolve => {
							uni.createSelectorQuery().select(`#cate-${item.productSubCategoryId}`).boundingClientRect(data => {
								item.left = data.left - (uni.upx2px(375) - data.width/2);
								resolve();
							}).exec()
						}))
					})
					Promise.all(tasks).then(()=>{
						let cur = this.threeCategoryList.filter(item=> item.productSubCategoryId === this.threeCategoryId);
						if(cur.length > 0){
							this.curCateItem = cur[0];
							this.$forceUpdate();
							console.log(this.curCateItem);
							
						}
					})
				// }
				
			},
			
			//三级分类切换
			changeCategory(item){
				if(this.threeCategoryId === item.productSubCategoryId){
					return;
				}
				this.threeCategoryId=item.productSubCategoryId;
				if(item.productSubCategoryId==='all'){
					this.subCategoryId=this.curSubCategoryId;
				}else{
					this.subCategoryId=item.productSubCategoryId;
				}
				this.switchChange();
				// this.curCateItem = item;
				// this.$forceUpdate();
				// this.isLoading = true;
				// this.$nextTick(()=>{
				// 	this.calcCateRect();
				// });
				
				// this.getProductsList({size:10,num:1});
			},

			
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			// checkCor: function() {
			// 	let that = this;
			// 	//这里计算按照实际情况进行修改，动态数据要进行动态分析
			// 	//思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
			// 	//数据很多可以多次if判断然后进行滚动距离计算即可
			// 	if (that.currentTab > 7) {
			// 		that.scrollTop = 400
			// 	} else {
			// 		that.scrollTop = 0
			// 	}
			// },
			detail(e) {
				uni.navigateTo({
					url: '../buyer/productDetail/productDetail'
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		height: 100vh;
		display: flex;
		flex-direction: column;
		.safe-area{
			width: 100%;
			height: calc(constant(safe-area-inset-bottom) + 98rpx);
			height: calc(env(safe-area-inset-bottom) + 98rpx);
		}
		
		.category{
			
			flex: 1;
			min-width: 0;
			min-height: 0;/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
			display: flex;
			padding-top:16rpx;
			.tab-view {
				width: 196rpx;
				// position: fixed;
				// left: 0;
				// z-index: 10;
				// box-sizing: border-box;
				background:transparent;
				height: 100%;
				position: relative;
				
				.tab-view-inner{
					width: 180rpx;
					min-height: 100%;
					background: #fff;
					box-sizing: border-box;
					padding:2rpx 0rpx;
				}
				.tab-bar-item {
					width: 180rpx;
					height:100rpx;
					box-sizing: border-box;
					
					font-size: 28rpx;
					color: #666666;
					position: relative;
					.item-inner{
						width: 100%;
						height: 100%;
						line-height:100rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						padding:0 20rpx;
						&.active {
							font-weight: 600;
							background-color: #fff;
							color:#000!important;
							font-size: 30rpx;
							position: absolute;
							left:0;
							top:2rpx;
							width: 188rpx;
							height: 100rpx;
							border-radius: 0rpx 16rpx 16rpx 0;
							box-shadow: 0px 4rpx 24rpx 0px rgba(0, 0, 0, 0.1);
							&::before {
								content: "";
								position: absolute;
								height: 96rpx;
								left: 0;
								border-left: 8rpx solid #EA655E;
							}
						}
					}
				}
				
				
				
			}
			

		}
		
	}
	

	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	
	
	
	/* 左侧导航布局 end*/
	.right-box {
		padding-right:20rpx;
		flex: 1;
		min-width: 0;
		.mescroll-empty{
			padding-bottom: 50%;
		}
		// .right-box-wrap{
		// 	// position: relative;
		// 	width:100%;
		// 	height: 100%;
		// 	box-sizing: border-box;
		// 	// overflow: hidden;
		// }
		// .right-box-inner{
		// 	width:100%;
		// 	height: calc(100vh - 200rpx);
		// 	box-sizing: border-box;
		// 	position: absolute;
		// 	// overflow-y: auto;
		// 	top: constant(safe-area-inset-bottom);
		// 	top: env(safe-area-inset-bottom);
		// }
		
	}
	.category-banner{
		width:100%;
		height:164rpx;
		background: #f5f5f5;
		overflow: hidden;
		padding:0 10rpx;
		image{
			width:100%;
			height:160rpx;
		}
	}
	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		// position: sticky;
		// top: var(--window-top);
		// top:0rpx;
		z-index: 990;
		position: sticky;
		top: 0;
		flex-direction: row;
		margin: 0px;
		border-bottom: 1px solid $borderColor;
		height: 84rpx;
		padding:0 10rpx;
		background-color: #f7f7f7;
		 // box-shadow: -20px -2px 45px -13px #fff inset;
		.cate-bar:after{
			border-color: #f5f5f5;
		}
		.cate-wrap{
			flex-wrap: nowrap;
			height: 80rpx;
			padding-top: 6rpx;
			.fill-view{
				flex-shrink: 0;
				width: 20rpx;
				height: 20rpx;
				
				&:last-child{
					width: 10rpx;
				}
			}
			.item{
				flex-shrink: 0;
				height:44rpx;
				padding: 0 24rpx;
				margin-right: 20rpx;
				font-size: 22rpx;
				color:#111111;
				text-align: center;
				line-height: 44rpx;
				background-color: #f5f5f5;
				border-radius: 100px;
				font-weight: 400;
			}
			.cateactive{
				color: #fff;
				background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
				opacity: 0.8;
			}
		}
	}

		.mescroll-uni-warp{
			min-height: 100%;
		}
		.mescroll-uni-content{
			height: 100%;
		}
		.mescroll-uni{
			min-height: calc(100vh - 440rpx);
			padding-bottom:constant(safe-area-inset-bottom)!important;
			padding-bottom:env(safe-area-inset-bottom)!important;
		}
		.category-wrap{
			padding:0 5rpx;
			width:100%;
			.category-goods{
				width:calc(50% - 20rpx);
				height: 312rpx;
				float:left;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(143, 97, 95, 0.1);
				box-sizing: border-box;
				padding:12rpx 12rpx 20rpx 12rpx;
				border-radius: 18rpx;
				margin:0rpx 10rpx 20rpx;
				// &:nth-child(2n+1){
				// 	margin:0rpx 20rpx 20rpx 0;
				// }
				// &:nth-child(2n){
				// 	margin:0rpx 10rpx 20rpx 20rpx;
				// }
				&:nth-child(1),&:nth-child(2){
					margin-top:20rpx;
				}
			
				.image-box{
					width: 100%;
					height: 164rpx;
					margin-bottom: 8rpx;
					overflow: hidden;
					border-radius:8rpx;
					image{
						width: 100%;
						height: 100%;
						// object-fit:cover;
					}
				}
				.image-text{
					padding:0 4rpx;
					.goods-title{
						color:#121212;
						font-size: 26rpx;
						// font-weight: bold;
						// overflow: hidden;
						// text-overflow:ellipsis;
						// white-space: nowrap;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						height: 68rpx;
						line-height: 36rpx;
						margin-bottom: 8rpx;
					}
					.goods-subtitle{
						font-size: 22rpx;
						color:#121212;
						height: 44rpx;
					}
					.goods-price{
						color: #EA655E;
						.discount{
							font-weight: bold;
							font-size: 28rpx;
							display: inline-block;
							margin-right: 10rpx;
						}
						
						.line-through {
							text-decoration: line-through;
							color: #999;
							font-size: 26rpx;
							
						}
					}
				}
				
			}
		}
		
	

	
</style>